// ---------------------------------------------------------------------------
//  Color Picker/extensions: Definition
// ---------------------------------------------------------------------------

    @size-definition: 90px;

    &-definition {
        background: rgba(0, 0, 0, 0);
        width: 200px; height: @size-definition;
        cursor: pointer;
        margin-top: @size-arrow;
        border-radius: 2px;
        position: relative;
        display: none;

        transition: background .1s;

        &:before, &:after {
            content: '';
            border-radius: 2px;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            z-index: -1; }

        &:before {
            background: #fff;
            opacity: .92; }
        &:after {
            background: @image-transparency;
            background-size: 9px 9px;
            image-rendering: pixelated;
            opacity: .1; }

    // -------------------------------------
    //  : `is flipped` modifier
    // -------------------------------------
        .is--flipped & {
            margin-top: 0;
            margin-bottom: @size-arrow; }

    // -------------------------------------
    //  : `view definition` modifier
    // -------------------------------------
        .view--definition & {
            display: block; }

    // -------------------------------------
    //  definition
    // -------------------------------------
        &-definition {
            font-family: 'Source Code Pro', monospace, serif;
            font-weight: 600;
            font-size: 17px;
            -webkit-font-smoothing: antialiased;
            color: #fff;
            margin: 0;
            text-align: center;
            text-shadow:
                0 1px 55px rgba(0, 0, 0, 1),
                0 0 18px rgba(0, 0, 0, 0.36),
                7px 0 30px rgba(0, 0, 0, 0.25),
                -7px 0 30px rgba(0, 0, 0, 0.21),
                0 1px 1px rgba(0, 0, 0, 0.15),
                0 1px 0 rgba(0, 0, 0, 0.03),
                0 -1px 1px rgba(0, 0, 0, 0.04),
                26px 1px 31px rgba(0, 0, 0, 0.43),
                -26px 1px 31px rgba(0, 0, 0, 0.47),
                0 1px 0 rgba(0, 0, 0, 0.04),
                0 -1px 0 rgba(0, 0, 0, 0.04),
                0 2px 1px rgba(0, 0, 0, 0.06);
            position: absolute;
            top: 40%; right: 0; left: 0;

            transition: transform .2s;
            transform: translate(0, -50%);

            backface-visibility: hidden;
            transform-style: preserve-3d; }
        &:hover &-definition {
            transition: transform .067s;
            transform: translate(0, -60%); }

    // -------------------------------------
    //  variable
    // -------------------------------------
        &-variable {
            font-family: 'Source Code Pro', monospace, serif;
            font-weight: 500;
            font-size: 12px;
            -webkit-font-smoothing: antialiased;
            color: #fff;
            margin: 0;
            text-align: center;
            text-shadow:
                0 1px 55px rgba(0, 0, 0, 1),
                0 0 18px rgba(0, 0, 0, 0.36),
                7px 0 30px rgba(0, 0, 0, 0.25),
                -7px 0 30px rgba(0, 0, 0, 0.21),
                0 1px 1px rgba(0, 0, 0, 0.15),
                0 1px 0 rgba(0, 0, 0, 0.03),
                0 -1px 1px rgba(0, 0, 0, 0.04),
                26px 1px 31px rgba(0, 0, 0, 0.43),
                -26px 1px 31px rgba(0, 0, 0, 0.47),
                0 1px 0 rgba(0, 0, 0, 0.04),
                0 -1px 0 rgba(0, 0, 0, 0.04),
                0 2px 1px rgba(0, 0, 0, 0.06);
            position: absolute;
            top: 75%; right: 0; left: 0;

            transition: transform .2s;
            transform: translate(0, -50%);

            backface-visibility: hidden;
            transform-style: preserve-3d; }
    }
